<div id="menu" class="mega-menu">
  <a class="menurepon disable"><?php echo $menu;?></a>		
  <ul id='pro-megamenu'>
  <?php foreach ($menus_root as $menu) { ?>
	<li class="root <?php if($menu['activemega']==1) echo " mega-root";?>"><a href="<?php echo $menu['url']; ?>"><?php echo $menu['title'] ?></a>
		<?php
			if($menu['activemega']==1) 
				$this->model_module_pro_megamenu->list_submenu_mega($menu['id']);
			else
				$this->model_module_pro_megamenu->list_submenu($menu['id']);
		?>
	</li>
  <?php } ?>
  </ul>
</div>
<script type="text/javascript">
	$('#pro-megamenu li.root:first').addClass('first');
	$('#pro-megamenu li.root:last').addClass('last');
	$('.sub-menu li a:first').addClass('first');
	$('.sub-menu li a:last').addClass('last');
	$(".menurepon").click(function(){
		if($(this).hasClass('disable')==true){
			$(this).removeClass('disable');
			$("#pro-megamenu").show();
		}
		else{
			$("#pro-megamenu").hide();
			$(this).addClass('disable');
		}
	});
	$('#pro-megamenu li.root').each(function(){
		if($(this).children('div.sub-menu').length > 0){
			$(this).children('a').after('<span class="submenu-control show"></span>');
		}
	});
	$('.submenu-control').click(function(){
		if($(this).parent().children('.sub-menu').is(':visible'))
			{
				$(this).parent().children('.sub-menu').slideUp();
				$(this).removeClass('hide').addClass('show');	
			}
		else
			{
				$(this).parent().children('.sub-menu').slideDown();
				$(this).removeClass('show').addClass('hide');	
			}
	});
	$(window).load(function(){
		$('#pro-megamenu > li > div').each(function(index, element) {
			$(this).css('max-width', ($( window ).width()-10) + 'px');
			// IE6 & IE7 Fixes
			if ($.browser.msie && ($.browser.version == 7 || $.browser.version == 6)) {
				var columns = $(element).find('ul').length;
				
				$(element).css('width', (columns * 143) + 'px');

				$(element).find('ul').css('float', 'left');
			}		
			
			var menu = $('#menu').offset();
			var dropdown = $(this).parent().offset();
			i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
			
			if (i > 0) {
				$(this).css('margin-left', '-' + i + 'px');
			}
		});
		if($('#menu .menurepon').is(':visible')==false){
			$('#menu li').hoverIntent(function(){
				$(this).children('.sub-menu').slideDown(200);
			},function(){
				$(this).children('.sub-menu').slideUp(200);
			})
		}
	});
if ( !$.browser.msie || ($.browser.msie && $.browser.version >= 9)) {
	$(window).resize(function(){
		$('#pro-megamenu > li > div').each(function(index, element) {
			$(this).css('max-width', ($( window ).width()-10) + 'px');		
			var menu = $('#menu').offset();
			var dropdown = $(this).parent().offset();
			
			i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
			
			if (i > 0) {
				$(this).css('margin-left', '-' + i + 'px');
			}
		});
	})
}
</script>